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1. ESTRUCTURA BASICA DE UN DOCUMENTO HTML 


El principio esencial del lenguaje HTML es el uso de las etiquetas (tags). Funcionan de la siguiente manera: 

<XXX> Este es el inicio de una etiqueta. 

</XXX> Este es el cierre de una etiqueta. 

Las letras de la etiqueta pueden estar en mayiisculas o miniisculas, indiferentemente. 

Lo que haya entre ambas etiquetas estara afectado por ellas. Pot ejemplo, todo el documento HTML debe estar entre las 
etiquetas <HTML> y </HTML>: 

<HTML> [Todo el documento] </HTML> 


Un documento HTML en si esta dividido en dos zonas principales: 

* La cabecera, comprendida entre las etiquetas <HEAD> y </HEAD> 

* El cuerpo, comprendido entre las etiquetas <BODY> y </BODY> 


Dentro de la cabecera hay informacion del documento, que no se ve en la pantalla principal del navegador que es utiliza- 
do para visualizar el documento HTML, principalmente la informacion encontrada en la cabecera es el titulo del docu¬ 
mento, comprendido entre las etiquetas <TITLE> y </TITLE>. El titulo debe ser breve y descriptivo de su contenido, 
pues sera lo que vean los demas cuando anadan nuestra pagina a su lista de favoritos (o bookmark). 


Dentro del cuerpo esta todo lo que queremos que aparezca en la pantalla principal (texto, imagenes, etc.) 


Por tanto, la estructura de un documento HTML queda de esta manera: 


<HTML> 

<HEAD> 

<TITLE> Titulo de la pagina </TITLE> 
</HEAD> 

<BODY> 

[Aqui van las etiquetas que visualizan la pagina] 
</BODY> 

</HTML> 
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2. DANDO FORMA AL TEXTO DEL DOCUMENTO HTML 


Cuando escribimos en el documento el texto que queremos que aparezca en la pantalla, veremos que este se acomoda a 
ella, sin que tengamos que pulsar el retorno del carro. Si queremos separar el texto en distintos parrafos debemos usar la 
etiqueta <P>, (que tiene su correspondiente etiqueta de cierre </P> pero no suele ponerse) 


El texto puede tener unos encabezados, comprendidas entre las etiquetas <H1> y </Hl>, <H2> y </H2>, etc. (hasta el 
numero 6), siendo el numero indicativo del tamano. El tamano mayor es el correspondiente al mimero 1. 


Una etiqueta muy interesante es la de centrado <CENTER> y </CENTER> (no la soportan todos los navegadores, aunque 
sf la mayorfa de ellos). Nos centra todo lo que este dentro de ella, ya sea texto, imagenes, etc. 


Tambien tenemos los separadores (horizontal rules), que se consiguen con la etiqueta <HR> (no existe la correspondiente 
de cierre). Con ella se obtiene una raya horizontal tan ancha como la pantalla, y con la apariencia de estar embutida sobre 
el fondo, como se puede observar a continuacion: 

Ejemplo 


<HTML> 


<HEAD> 

<TITLE> Mi pagina en el Web - 1 </TITLE> 

</HEAD> 

<BODY> 

<H1> <CENTER>Primera Pagina </CENTER> </Hl> 

<HR> 

Esta es mi primera pagina, aunque todavia es muy sencilla. Como el lenguaje HTML 
no es diffcil, pronto estate en condiciones de hacer cosas mas interesantes. 

<P> Aquf va un segundo parrafo, i que les parece ? 

</BODY> 


Una etiqueta puede estar anidada dentro de otra. En el ejemplo anterior lo esta la etiqueta <CENTER> dentro de la eti¬ 
queta <H1>. 


Cuando queremos poner un texto sin ninguna caracteristica especial, lo ponemos directamente. La separacion entre pa¬ 
rrafos (dejando una Ifnea en bianco) la conseguimos con la etiqueta <P>. 


Si queremos separar los parrafos, o cualquier otra cosa, pero sin dejar una Imea en bianco, usamos una etiqueta pensada 
para ello: <BR> (break, o romper). No tiene etiqueta de cierre. 


Al escribir el texto, si ponemos mas de un espacio en bianco entre dos palabras observamos que el navegador solo recono- 
ce uno de ellos. Si queremos forzarle a que lo haga, debemos poner el codigo "Snbsp; " (non-breaking space). 


Para destacar alguna parte del texto se pueden usar: 

<B> y </B> para poner algo en negrita (bold). 

<I>y</I> para poner algo en cursiva (italic). 


Otra etiqueta interesante es <PRE> y</PRE>. El texto que se encuentre entre ella estara preformateado, es decir que 
aparecera como haya sido escrito y con una fuente de espaciado fijo (tipo Courier). Se respetaran los espacios en bianco y 
retornos del carro, tal como estaban en nuestro documento HTML. Es muy apropiada para confeccionar tablas poco ela- 
boradas y otros documentos similares. 


JL-CursodeHTML 



Con la etiqueta <TT> y </TT> conseguimos que el texto tenga un tamano menor y la apariencia de los caracteres de una 
maquina de escribir (typewriter). La diferencia con la anterior es que no preformatea el texto, sino que unicamente cam- 
bia su apariencia. 


La etiqueta <BLOCKQUOTE> y </BLOCKQUOTE> se utiliza para destacar una cita textual dentro del texto general. Este 
parrafo esta escrito entre ambas etiquetas. Deja margenes a ambos lados, por eso se usa para poner sangrlas. 


En las formulas matematicas puede interesar poder escribir Indices y subindices, que se consiguen con las etiquetas 
<SUP> </SUP>y<SUB> </SUB>respectivamente. 


Listas 

A menudo nos interesara presentar las cosas en forma de listas. Podemos escoger entre tres tipos distintos: 

* Listas desordenadas (no numeradas) 

* Listas ordenadas (numeradas) 

* Listas de defmicion. 


Las listas desordenadas (Unordered Lists) sirven para presentar cosas que, por no tener un orden determinado, no necesi- 
tan ir precedidas por un numero. Su estructura es la siguiente: 

<UL> 

<LI> Un elemento 
<LI> Otro elemento 
<LI> Otro mas 
<LI> etc. 

</UL> 

Es decir, toda la lista esta dentro de la etiqueta <UL> y </UL>, y luego cada elemento va precedida de la etiqueta <LI> 
(list Item). Se puede anidar una lista dentro de otra. Por ejemplo: 

<UL> 

<LI> Mamlferos 
<LI> Peces 
<UL> 

<LI> Sardina 
<LI> Bacalao 

</UL> 

<LI>Aves 

</UL> 


Las listas ordenadas (Ordered Lists) sirven para presentar elementos en un orden determinado. Su estructura es similar a 
la anterior. La diferencia estriba en que aparecera automaticamente un numero correlativo para cada elemento. 

<OL> 

<LI> Primer Elemento 
<LI> Segundo Elemento 
<LI> Tercet Elemento 
<LI> etc. 

</OL> 

A1 igual que las listas desordenadas, tambien se pueden anidar las listas ordenadas. 
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El tercer tipo lo forman las listas de definiciones. Como su nombre indica, son apropiadas para glosarios (o definiciones 
de terminos). Toda la lista debe ir englobada entre las edquetas <DL> y </DL>. Y a diferencia de las dos que hemos visto, 
cada renglon de la lista tiene dos partes: 

* El nombre de la cosa a definir , que se consigue con la etiqueta <DT> (definition term). 

* La definicion de dicha cosa, que se consigue con la etiqueta <DD> (definition definition). 

<DL> 

<DT> Una cosa a definir 

<DD> La definicion de esta cosa 
<DT> Otra cosa a definir 

<DD> La definicion de esta otra cosa 

</DL> 


Comentarios no visibles en la pantalla 

A veces es muy util escribir comentarios en el documento HTML sobre el codigo que escribimos, que nos pueden servir 
para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla. 

Esto se consigue encerrando dichos comentarios entre estos dos simbolos: < ! — y —> 


Ejemplo 


<HEAD> 

<TITLE> Mi pagina del Web - 2 </TITLE> 

</HEAD> 

<BODY> 

<CENTER><H1> Mis aficiones </Hl></CENTER> 

<HR> 

Sin un orden particular, mis <B> aficiones </B> son las siguientes: 
< ! — Una lista sin orden alguno —> 


<UL> 


<LI> El cine 
<LI> El deporte 
<UL> 

<LI> Natacion 
<LI> Baloncesto 

</UL> 

<LI> Lamusica 


</UL> 

La musica que mas 
< ! — Una lista a 
<0L> 


e gusta es <I> (ei 


<LI> El rock 
<LI> El jazz 
<LI> La musica clasica 


</0L> 

</BODY> 

</HTML> 


orden de preferencia): </I> 
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3. CARACTERES ESPECIALES 


Existen algunas limitaciones para escribir el texto. Una de ellas se debe a que las etiquetas se forman como un comando 
escrito entre los slmbolos < y >. For tanto, si se quisiera escribir estos caracteres como parte normal del texto, dan'a lugar 
a una ambigiiedad, ya que el programa navegador podrfa interpretarlos como el comienzo o final de una etiqueta, en vez 
de un caracter mas del texto. 

Para resolver este problema, existen unos codigos especiales, pensados para poder escribir estos caracteres y otros relacio- 
nados con las etiquetas. 

& It; para < (less than, menor que) & amp; para & (ampersand) 

&gt; para > (greater than, mayor que) Squot; para " (double quotation) 

Como se ve, estos codigos empiezan siempre con el signo & y acaban siempre con ; 

Antes ya citamos el espacio no rompible, cuando aparece, el navegador sabe que no debe partir una li'nea por ese lugar. Se 
usa tambien para anadir espacios: 

Snbsp; espacio no rompible (non breaking space) 

De una manera similar, existen codigos para escribir letras espedficas de distintos idiomas. Hay muchos de ellos, pero, 
logicamente, los que mas nos interesan son los propios del Castellano (las vocales acentuadas y con dieresis, la n y N, los 
signos ^ i) 


Los codigos de las vocales acentuadas se forman comenzando con &, seguido de la vocal 
acute (aguda) y terminando con el signo ; 


Saacute; Para la a 
Seacute; Para la e 
Siacute; Para la 1 
Soacute; Para la 6 
Suacute; Para la u 

El resto de los codigos son: 

&ntilde; Para Ian 
&uuml; Para la ti 

& # 191; Para ^ 


&Aacute; Para la A 
SEacute; Para la E 
& I acute; Para la I 
SOacute; Para la 6 
SUacute; Para la U 


SiNtilde; Para la 1^ 
StUuml ; Para la U 
& # 161; Para ; 


cuestion, seguido de la palabra 


Todo esto, que como se ve es muy laborioso, puede parecer imitil ya que si escribimos nuestro texto sin hacer ningun caso 
de estas convenciones, escribiendo las letras acentuadas y demas signos directamente, es muy posible que el resultado lo 
veamos correctamente en nuestro navegador, pero no podemos estar seguros de que les ocurra lo mismo a todos los que 
accedan a nuestras paginas con otros navegadores distintos. 
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4. ENLACES 


La caracterfstica que mas ha influido en el espectacular exito de la Web ha sido, aparte de su caracter multimedia, la posi- 
bilidad de unit los distintos documentos repartidos por todo el mundo por medio de enlaces hipertexto. 

En general, los enlaces tienen la siguiente estructura: 

<A HREF="XXX"> YYY </A> 

Donde XXX es el destino del enlace (Observe las comillas). YYY es el texto indicativo en la pantalla del enlace (con un co¬ 
lor especial y generalmente subrayado) 


Tipos de enlaces 

1. Enlaces dentro de la misma pagina 

A veces, en el caso de documentos (o paginas) muy extensos, nos puede interesar dar un salto desde una posicion a otra de- 
terminada. En este caso, lo que antes hemos llamado XXX, es decir, el destino del enlace, en este caso el sitio dentro de la 
pagina a donde queremos saltar, se sustituye por # MARC A (la palabra MARC A puede ser cualquier palabra que queramos). 
Lo que hemos llamado antes YYY es la palabra (o palabras) que apareceran en la pantalla en color (en forma de hipertex¬ 
to). Su estructura es, entonces: 

<A HREF="#MARCA"> YYY </A> 

Y en el sitio exacto a donde queremos saltar, debemos poner la siguiente etiqueta: 

<A NAME="MARCA"> </A> 


2. Enlaces con otra pagina nuestra 

Puede ser que tengamos una sola pagina. Pero lo mas frecuente es que tengamos varias paginas, una inicial (o principal) y 
otras conectadas a ella, e incluso entre ellas mismas. 

Supongamos que queremos enlazar con la pagina creada en el ejemplo 2, que hemos llamado mipag2 . html. En este 
caso, simplemente sustituimos lo que hemos llamado XXX (el destino del enlace) por el nombre del archivo: 

<A HREF="niipag2 . html"> Ejemplo de mi segunda pagina </A> 

Si queremos que vaya a un sitio concreto de otra pagina nuestra en vez de ir al principio de la pagina, adonde va por defec- 
to, en ese sitio tenemos que colocar una marca (ver la Enlaces dentro de la misma pagina), y completar el enlace con la re¬ 
ferenda a esa marca. 

Lo veremos con el siguiente ejemplo: <A NAME="MIMARCA"></A> es la marca que colocaremos en nuestra pagina, a 
la que deseamos acceder desde otra nuestra. Entonces la etiqueta con la que efectuaremos la llamada tiene que ser de esta 
manera: <A HREF="mipag2 . html#MIMARCA"> En mi otra pagina </A>. 


Una observacidn importante: Pudiera ocurrir que nuestro sitio Web estuviera organizado con un directorio principal, y 
otros subdirectorios auxiliares. Si la pagina a la que deseamos accesar esta, por ejemplo en el subdirectorio llamado mi- 
subdir, entonces en la etiqueta tendrla que colocarse misubdir/mipag2 . html. 

Yak inversa, si quiero saltar desde una pagina a otra que esta en un directorio anterior, en la etiqueta tendrk que haber 
puesto . . /mipag2 . html. Esos dos puntos colocados al principio hacen que se dirija al directorio anterior. Observese 
que se debe utilizar el slmbolo / para indicar los subdirectorios, y no \ que es propio unicamente de Windows. 

Si nos queremos evitar todas estas complicaciones, podemos tener todo junto en un unico directorio, pero esto tiene el in- 
conveniente de que este todo mas desordenado, y sea mas diffcil hacer futuras modiflcaciones. 
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3. Enlaces con una pagina fuera de nuestro sistema 

Si queremos enlazar con una pagina que este fiiera de nuestro sistema (es decir, que este en un servidor distinto al que so- 
porta nuestra pagina), es necesario conocer su direccion completa, o URL (Uniform Resource Locator). El URL podn'a 
ser, ademas de la direccion de una pagina Web, una direccion de FTP, Gopher, etc. 

Una vez conocida la direccion (o URL), la colocamos en vez de lo que hemos llamado XXX (el destino del enlace). Si que¬ 
remos enlazar con la pagina de Netscape (http: //home . netscape. com), la etiqueta serfa: 

<A HREF="http: //home. netscape .com"> Pagina inicial de Netscape </A> 

Es muy importante copiar estas direcciones correctamente (respetando las mayusculas y miniisculas, pues los servidores 
UNIX si las distinguen) 


4. Enlaces con una direccion de e-mail 

En este caso, sustituimos lo que se ha llamado antes XXX (el destino del enlace) por mailto: seguido de la direccion de e- 
mail. La estructura de la etiqueta es; 

<A HREF="mailto:direccion de e-mail"> Texto del enlace </A> 

Ejemplo 

<A HREF= "mailto:president@whitehouse. gov">Escribe al presidente de USA</A> 


Hay algunos navegadores que no subrayan el comentario de este tipo de enlace. Una manera recomendable y mas segura 
para conocer la direccion e-mail seria poner algo asi como: 

<A HREF= "mailto:president@whitehouse. gov">president@whitehouse.gov</A> 

Es decir, es conveniente, por la razon dicha anteriormente, poner tambien en el texto del enlace la direccion de correo 
electronico. Asi no puede haber duda de a que se refiere. 


Ejemplo 


<HEAD> 

<TITLE> Mi pagina del Web - 3 </TITLE> 

</HEAD> 

<BODY> 

<CENTER><H1> Mis paginas favoritas </Hl></CENTER> 
<HR> 

Estas son mis paginas favoritas; 

<P> 


<A HREF= "http://home.netscape.com"> Netscape</A> 

<BR> <A HREF="http://www.microsoft.com"> Microsoft </A> 
<BR> <A HREF="http://WWW.yahoo.com"> Yahoo! </A> 

</P> 

</BODY> 

</HTML> 
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5. IMAGENES 


La etiqueta que nos sirve para incluir imagenes en nuestras paginas Web es muy similar a la de enlaces a otras paginas, que 
hemos visto en el capitulo anterior. La linica diferencia es que, en lugar de indicar al programa navegador el nombre y la 
localizacion de un documento de texto HTML para que lo cargue, se le indica el nombre y la localizacion de un archivo 
que contiene una imagen. 

La estructura de la etiqueta es; 

<IMG SRC="imagen.gif"> 

Con el comando IMG SRC (image source, fuente de la imagen) se indica que se quiere cargar una imagen llamada, como 
esta indicado, imagen .gif (o el nombre que tenga). 


Dentro de la eriqueta se pueden anadir otros comandos, como ALT 

<IMG SRC="imagen.gif" ALT="descripci6n"> 

Con el comando ALT se introduce una descripcion (una palabra o una frase breve) indicativa de la imagen. Este comando, 
que en principio se puede omitir, es en beneficio de los que accedan a nuestra pagina con un programa navegador en for¬ 
ma de texto como el Lynx. Ya que no son capaces de ver la imagen, por lo menos pueden hacerse una idea sobre ella. Pero 
no es solo por esto. Hay casos, como veremos mas adelante, en los que se utiliza una imagen como enlace a otra pagina. Si 
se omitiera este comando, los que utilizan dichos navegadores no podn'an de ninguna manera acceder a esas paginas. 


Con respecto a la localizacion del archivo de esa imagen, se puede decir aquf lo mismo que en el capi'tulo anterior refe- 
rente a los enlaces. Si no se indica nada especial, como en el caso expuesto, quiere decir que el archivo imagen. gif es¬ 
ta en el mismo directorio que el documento HTML que estamos escribiendo. Si no es asf, se siguen los mismos criterios 
indicados para los enlaces. 

Las imagenes deben estar guardadas en formato GIF (maximo 256 colores, para dibujos) o en formato JPG (para imagen 
fotografica). 


Un aspecto muy importante a tener en cuenta es el tamano de las imagenes, pues una imagen grande supone un archivo 
grande, y esto puede resultar en un tiempo excesivo de carga, con el consiguiente riesgo de que quien este intentando car- 
gar nuestra pagina se canse de esperar, y desista. 

Para elegir la posicion de la imagen con respecto al texto hay distintas posibilidades. La mas sencilla es colocarla entre dos 
parrafos, con un titular a un lado. Los navegadores actuales (como el Netscape Navigator y el Microsoft Internet 
Explorer) permiten que el texto pueda rodear a la imagen. 


De momento nos vamos a limitar a escoger la posicion del titular con respecto a la imagen. Se puede poner arriba, en 
medio o abajo del lado de la imagen. Para ello se anade el comando ALIGN a la etiqueta, de la siguiente manera: 


<IMG SRC="isla.gif' 
<IMG SRC="isla.gif' 
<IMG SRC="isla.gif' 


ALIGN="top"> 
ALIGN="middle"> 
ALIGN="bottom"> 


Titular alineado arriba 
Titular alineado en medio 
Titular alineado abajo 
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Otra posibilidad muy interesante es la de utilizar una imagen como enlace a otra pagina. Para estos casos se utilizan gene- 
ralmente imagenes pequenas (iconos), aunque se puede usar cualquier dpo de imagen. 

Segiin vimos en el capi'tulo anterior, la estructura general de un enlace es: 

<A HREF="XXX"> YYY </A> 

En este caso sustituimos XXX por el nombre del archive de la pagina a la que queremos acceder. Y en lugar de YYY po- 
nemos la etiqueta completa de la imagen (que queda asf englobada dentro de la etiqueta del enlace). 

Como por ejemplo (hombre . gif) para acceder al ejemplo practice del capi'tulo 2 (mipag2 . html): 

<A HREF="itiipag2 .htitil"><IMG SRC="hoitibre. gif "></A> 

Pulsando la imagen comprobamos que efectivamente enlaza con la pagina deseada. Observese ademas que la imagen esta 
rodeada de un rectagulo del color normal en los enlaces. Si no se desea que aparezea ese rectangulo, hay que incluir dentro 
de la etiqueta de la imagen el atributo BORDER= " 0 ", es decir: 

<A HREF="itiipag2 .htitil"><I]yiG SRC= "hombre . gif " BORDER=" 0 "></A> 

Posicionando el cursor sobre esta ultima imagen, comprobamos que actua tambien como enlace aunque carezea del rec¬ 
tangulo de color. Esto puede resultar mas estetico, pero se corre el riesgo de que el usuario no se de cuenta de que la ima¬ 
gen sirve de enlace. 


Tambien podemos utilizar una imagen para enlazar con otra imagen. Supongamos que queremos enlazar con la imagen 
estaimagen.gif por medio de esta otra imagen desdeesta.gif: 

<A HREF="estaimagen.gif"XIMG SRC="desdeesta.gif"></A> 

Por ultimo, otra posibilidad es la de utilizar un texto para enlazar con una imagen. En este caso sustituimos XXX (el des- 
tino del enlace) con el nombre del archivo de la imagen a la que queremos acceder e YYY (lo que aparece en pantalla co¬ 
mo el enlace) por el texto. 

Ejemplo 

<A HREF=" isla. gif "> un paralso tropical </A> 


Un tipo de imagenes del que se hace abundante uso y que sirven para mejorar la presentacion de la pagina son los iconos, 
botones, barras separadoras, etc. A pesar de su tamano o forma, son imagenes como cualquier otra. 


JL-CursodeHTML 



6. ALINEACION Y DIMENSIONADO DE IMAGENES 


Alineacion de las imagenes 

Si se quiere lograr disenos fantasticos y rodear con textos los graficos se puede ALIGN junto con la etiqueta ya conocida 
<IMG SRC= " imagen. gif " >. Donde quiera que se desee que aparezca una imagen basta con insertar: 

<IMG SRC="/caitiino/imagen.gif " ALIGN=" left"> Alinea a la izquierda de la pagina 
<IMG SRC="/caitiino/imagen.gif " ALIGN="center"> Alinea al centra de la pagina 

<IMG SRC="/caitiino/imagen.gif " ALIGN= "right"> Alinea a la derecha de la pagina 

Si se quiere interrumpir el proceso de rellenado del texto a los lados de la imagen, para que salte basta debajo de elk, es 
decir, dejar un espacio en bianco parcialmente, se pueden emplear atributos de la etiqueta <BR>: 

<BR CLEAR= " left" > Busca el primer margen libre (clear) a la izquierda. 

<BR CLEAR= " right" > Busca el primer margen libre a la derecha. 

<BR CLEAR= " all" > Busca el primer margen libre a ambos lados. 


Ejemplo 

<IMG SRC="imagen.gif" ALIGN="left"> Este texto esta a un lado de la imagen. 

<BR> Este tambien esta a un lado de la imagen, en la linea siguiente. 

<BR CLEAR= " left"> Este otro texto, en cambio, ha buscado el primer margen libre a la izquierda. 


Dimensionando la imag en 

Los programas navegadores cuando cargan un documento HTML y encuentran una etiqueta de una imagen, interrum- 
pen el proceso de carga y solicitan al servidor que le envfe dicha imagen, quedando a la espera basta que se complete el en- 
vfo, repitiendose este proceso con cada una de las imagenes. 

Esto es especialmente molesto cuando, como ocurre frecuentemente, en la cabecera de la pagina se encuentra una imagen 
grande, ya que durante un tiempo relativamente largo no se vera nada en la pantalla. 

Para evitar este inconveniente existen unas extensiones de la etiqueta de imagen <IMG SRC="imagen.gif "> que 
sirven para indicar al navegador cuales son sus dimensiones en pixels. (Obtenidas de algiin programa grafico). 

En este caso, el navegador acnia de una forma mas favorable, ya que entonces, como conoce las dimensiones de las image¬ 
nes les reserva un espacio en la pantalla y va colocando el texto de forma apropiada, sin ninguna interrupcion, a la vez que 
va rellenando esos espacios reservados a las imagenes. Estos comandos o atributos son WIDTH (ancho) y HEIGHT (alto). 

Por ejemplo, para la imagen isla.gif situada mas arriba: 

<IMG SRC="imagen.gif" WIDTH="120" HEIGHT="94"> 

Es conveniente hacer esto con todas las imagenes, incluso con las mas pequenas (iconos, botones, etc), para que no haya 
ninguna interrupcion en el proceso de carga del documento. 

Se puede tambien, si se quiere, dimensionar las imagenes con unos valores distintos a los que realmente tienen, variando el 
tamano, la anchura o la altura. Esto es muy conveniente, por ejemplo para poner en la pagina un thumbnail (reproduc- 
cion en pequeno de una imagen), que hace de enlace a la imagen en su verdadero tamano. De esta manera no recargamos 
demasiado una pagina, y el usuario sera quien decida que imagenes desea cargar. 


Para hacer que una imagen reducida sea el enlace con la imagen en su tamano original, lo conseguimos con: 

<A HREF="imagen.gif"XIMG SRC="imagen.gif" WIDTH="150" HEIGHT="75"></A> 

Tambien se puede conseguir esto de otra manera, mas correcta aunque mas laboriosa. Es la de reducir en un programa 
grafico esta imagen, por ejemplo a 150x75, guardarla con otro nombre, y luego hacer que la pequena sea el enlace de la 
grande. Es mas correcta esta otra solucion porque no todos los navegadores reconocen los comandos WIDTH y HEIGHT, 
como algunas de las versiones mas antiguas de Netscape. 
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7. FONDOS Y COLORES 


Se puede cambiar el fondo de dos maneras distintas: 

1. Con un color uniforme 

2. Con una imagen 


1. Fondos con un color uniforme 


Se consigue anadiendo el comando BGCOLOR a la etiqueta <BODY> (situada al principio del documento), de la siguiente 
manera: 


<BODY BGCOLOR="#XXYYZZ"> 

XX Es un mimero indicativo de la cantidad de color rojo 

YY Es un mimero indicativo de la cantidad de color verde 

Z Z Es un mimero indicativo de la cantidad de color azul 


Estos mimeros estan en numeracion hexadecimal. Esta numeracion se caracteriza por tener 16 dlgitos (en lugar de los 
diez de la numeracion decimal habitual). Estos dlgitos son: 

0123456789ABCDEF (A=10, B=ll, C=12, D=13, E=14, F=15) 

Es decir, que en nuestro caso, el mimero menor es el 00 y el mayor el FF (=255). Asl, por ejemplo, el color rojo es el 


#FF0000, porque tiene el maximo de rojo y cero de los otros dos colores. Los colores mas simples son: 


TTi. i. UU W, U 

iFFOOOO 

Rojo 

iFFFFFF 

Blanco 

#FF00FF 

Magenta 

iOOFFOO 

Verde 

#000000 

Negro 

#00FFFF 

Celeste 

iOOOOFF 

Azul 

#FFFF00 

Amarillo 

#CCCCCC 

Gris 


Para hacer un color mas oscuro, hay que reducir el mimero de su componente, dejando los otros dos invariables. Asl, el 
rojo #FF0000 se puede hacer mas oscuro con #AA0000, o aiin mas oscuro con #550000. 

Para hacer que un color tenga un tono mas suave (mas pastel), se deben variar los otros dos colores haciendolos mas claros 
(mimero mas alto), en una cantidad igual. Asl, podemos convertir el rojo en rosa con #FF7 070. 


Colores del texto y de los enlaces 

Si no variasen los colores habituales del texto y de los enlaces (negro y azul, respectivamente), podrla ocurrir que su lectu- 
ra contra un fondo oscuro fuese dificultosa o imposible, si el fondo fuese precisamente negro o azul. 

Para evitar esto, podemos escoger los colores del texto y de los enlaces, anadiendo a la etiqueta (si se desea) los siguientes 
comandos: 

TEXT color del texto LINK color de los enlaces 

VLINK color de los enlaces visitados ALINK color de los enlaces activos (al ser pulsados) 

Los codigos de los colores son los mismos que los que se han visto anteriormente. 


La etiqueta, con todas sus posibilidades, serfa: 

<BODY BGCOLOR="#XXYYZZ" TEXT="iXXYYZZ" LINK="iXXYYZZ" 

VLINK="#XXYYZZ" ALINK="#XXYYZZ"> 

El comando TEXT explicado anteriormente (que va englobado dentro de la etiqueta <BODY>) cambia el color de la tota- 
lidad del texto de la pagina. 

Tanto el Netscape Navigator 2, como el Microsoft Explorer soportan una etiqueta de color de la firente con la que se 
puede cambiar solo una parte del texto: 

<FONT COLOR="#XXYYZZ">Este texto esde color XXYYZZ </FONT> 
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2. Fondos con una imag en 


El fondo de una pagina puede ser tambien una imagen, ya sea en formate GIF o JPG. Esta imagen se repite por toda la 
pagina, como un mosaico. La estructura de la etiqueta puede ser: 

<BODY BACKGROUND="imagen.gif"> 

<BODY BACKGROUND="imagen.j pg"> 

No todos los navegadores soportan este formato. 


Se puede anadir tambien a esta etiqueta todos los comandos para cambiar los colores del texto y de los enlaces, vistos ante- 
riormente. Esto es imprescindible a veces para conseguir que el texto sea legible, en contraste con el color o imagen de 
fondo. 


Elay que prever la posibilidad de que quien acceda a nuestra pagina haya deshabilitado la carga automatica de imagenes, 
en cuyo caso tampoco cargarfa la imagen que sirve como fondo y solo verfa el fondo estandar. Esto podn'a ser muy perju- 
dicial si hemos escogido unos colores para el texto y los enlaces que no contrastan bien con ese fondo. La solucion a este 
problema es poner dentro de la etiqueta <BODY> los dos comandos BACKGROUND y BGCOLOR (en este orden), tenien- 
do cuidado en escoger un color uniforme de fondo parecido al de la imagen. 


Por ejemplo, supongamos que queremos poner como fondo la imagen nubes. jpg. Escogemos entonces un color de 
fondo azul claro, #CCFFFF. La etiqueta quedaria asf: 

<BODY BACKGROUND="nubes.jpg" BGCOLOR="#CCFFFF"> 

Esto tiene la ventaja adicional de que, incluso aunque no se deshabilite la carga automatica de imagenes, al cargar la pagi¬ 
na, lo primero que se ve es ese fondo de color uniforme, que luego es reemplazado por el de la imagen. 
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8. TABLAS 


Las tablas son un modo sencillo de disponer el texto en columnas o de anadir un titular a una ilustracion, pero hay mas 
aplicaciones. La etiqueta <TABLE> puede ser una poderosa herramienta de formato. Se puede hacer uso de la etiqueta 
< TABLE > para ubicar texto e imagenes con precision, en practicamente casi cualquier lugar de una pagina. 

Estructura de una tabla 


Vamos a ver ordenadamente (de fliera hacia dentro) las etiquetas necesarias para confeccionar las tablas. 

<TABLE> 

[resto de las etiquetas] 

</TABLE> 

• Es la etiqueta general, que engloba a todas las demas. 


<TABLE BORDER="n"> 

[resto de las etiquetas] 

</TABLE> 

• Presenta los datos tabulados con un horde, haciendo las tablas mas atractivas, y el grosor es de n pixeles. 


<TR> 

[etiquetas de las distintas celdas de la primera flla] 

</TR> 

• Permite format cada fila de la tabla. Hay que repetirla tantas veces como filas queremos que tenga la tabla. 


<TD> 

[contenido de cada celda (imagenes, texto, etc.)] 

</TD> 

• Permite format las celdas que contendra cada fila. Hay que repetirlas tantas veces como celdas deba tenet la fila. 


<TH> 

[encabezamiento de tabla] 

</TH> 

• Es utilizada para colocar encabezamientos en negrita sobre las columnas 


Ejemplo 


<HTML> 

<HEAD> 

<TITLE> Pagina de prueba para tablas </TITLE> 

</HEAD> 

<BODY> 

<TABLE BORDER> 

<TR> 

<TH>Columna l</TH><TH>Columna 2</TH><TH>Columna 3</TH> 
<TD>filal-celdal</TD><TD>filal-celda2</TD><TD>filal-celda3</TD> 
</TR> 

<TR> 

<TD>fila2-celdal</TD><TD>fila2-celda2</TD><TD>fila2-celda3</TD> 

</TR> 

</TABLE> 

<BR> [Aqui van las etiquetas que visualizan la pagina] 

</BODY> 

</HTML> 

Si el numero de celdas de una fila es distinto al de otra el navegador forma el mimero de filas y columnas que haga falta, 
dejando espacios en bianco en las filas que tengan menos celdas. 
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Titular de tabla 


Se puede anadir un titulo a la tabla, es decir un texto situado encima de la tabla que indica cual es su contenido. Se consi- 
gue con la etiqueta <CAPTION> y </CAPTION>. Por ejemplo: 

<CAPTION> Esta es mi primera tabla </CAPTION> 

<CAPTION ALIGN="top">Tftulo</CAPTION> Coloca el tftulo sobre la tabla. 

<CAPTION ALIGN="bottom">Tltulo</CAPTION> Coloca el titulo bajo la tabla. 


Contenido de las celdas 


Solo se ha puesto hasta ahora en el ejemplo, texto normal dentro de las distintas celdas. Pero se puede poner en ellas cual- 
quier otto elemento de los que van en un documento HTML, como imagenes, enlaces, etc. No hay mas que poner dentro 
de la etiqueta de la celda la etiqueta correspondiente a una imagen, un enlace, etc. 


Ejemplos 

a) Con una imagen 

<TABLE BORDER> 

<TR> 

<TD> <IMG SRC="imagen.gif"> </TD> 
</TR> 

</TABLE> 


b) Con un enlace 

<TABLE BORDER> 

<TR> 

<TD><A HREF="index. html"> Mi pagina principal </A></TD> 
</TR> 

</TABLE> 


Posicionamiento del contenido dentro de la celda 


Normalmente, el contenido de una celda esta alineado a la izquierda. Pero se puede cambiar esto anadiendo dentro de la 
etiqueta de la celda los siguientes atributos: 

<TD ALIGN="center"> A1 centro </TD> 

<TD ALIGN= " right" > A la derecha </TD> 

<TH ALIGN= " left" > A la izquierda </TH> 

El alineamiento por defecto en el sentido vertical es en el medio. Tambien se puede cambiar, anadiendo dentro de la eti¬ 
queta de la celda los siguientes atributos: 

<TD VALIGN= " top "> Arriba </TD> 

<TD VALIGN="bottom"> Abajo </TD> 
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Variando las dimensiones de la tabla 


El navegador se encarga normalmente de dimensionar el tamano total de la tabla de acuerdo con el niimero de filas, de 
columnas, pot el contenido de las celdas, espesor de los hordes, etc. 

A veces nos puede convenir forzarle para que la tabla tenga unas dimensiones totales mayores que las que le corresponden, 
tanto en anchura como en longitud. Esto se consigue anadiendo dentro de la etiqueta de la tabla los atributos WIDTH y 
HEIGHT igual a un porcentaje de la dimension de la pantalla, o a una cifra que equivale al niimero de pixels. 

Pot ejemplo, si colocamos: 

<TABLE WIDTH="60%"> 

O, pot ejemplo ponemos: 

<TABLE HEIGHT="200"> 

Celdas que abarcan a otras varias 

A veces puede interesarnos que una celda se extienda sobre otras varias. Esto se consigue anadiendo dentro de la etiqueta de 
la celda los atributos COLSPAN="niimero" para extenderse sobre un niimero determinado de columnas, o 
ROWSPAN="niimero" para extenderse verticalmente sobre un niimero determinado de filas. 

Por ejemplo, en la primera tabla del ejemplo anterior vamos a anadir una fila con una sola celda, que abarca a dos colum- 

<TR> <TD COLSPAN="2 "> Celda sobre 2 columnas </TD> <TR> 

O, en la misma tabla, vamos a anadir una celda en la primera fila, pero que abarque tambien a la siguiente: 

<TD R0WSPAN="2"> Celda junto a 2 filas </TD> 


Color de fondo en las tablas 


Podemos conseguir que las tablas tengan un color de fondo, siguiendo un procedimiento totalmente analogo al empleado 
para que una pagina tenga un color de fondo uniforme (segiin vimos en el capltulo 7). Para ello debemos utilizar el atri- 
buto BGCOLOR=" iXXYYZZ ", visto en dicho capltulo. 

Se puede conseguir asl: 

<TABLE BORDER BGCOLOR="#XXYYZZ"> 

[resto de las etiquetas] 

</TABLE > La totalidad de la tabla tendra un color de fondo. 

<TD BGCOLOR="#XXYYZZ"> 

[contenido de la celda] 

</TD> Solo una celda tendra color de fondo, distinto al resto. 


Imagenes de fondo en las tablas 

El Explorer de Microsoft soporta la colocacion de imagenes de fondo en el interior de las tablas, de una manera analoga a 
como se hace en una pagina (segiin vimos en el capftulo 7). 

Para ello debemos, utilizar el atributo BACKGROUND="imagen. gif " o BACKGROUND= "imagen. jpg", visto en 
dicho capftulo. 

Si se utiliza dentro de la etiqueta <TABLE> la imagen en cuestion se multiplicara detras de todas las celdas. 

(Con el Netscape no se vera ninguna imagen de fondo, solo con el Explorer) 

Si, por el contrario, solo se pone este atributo dentro de la etiqueta de una celda concreta (<TD> o <TH>), entonces la 
imagen de fondo se vera solo en esa celda. 
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Separacion entre las celdas de una tabla 


Por defecto, la separacion entre las distintas celdas de una tabla es de dos pixels. Pero se puede variar esto con el atributo 
CELLSPACING, que se pone dentro de la etiqueta TABLE. 

Por ejemplo, para obtener una separacion de 20 pixels entre celdas ponemos: 

<TABLE BORDER CELLSPACING="20"> 

A primera vista parece como si esto fuera lo mismo que si hubieramos aumentado el espesor de los hordes. Pero para 
comprobar que no es asi, hagamos que en el caso anterior, tenga ademas unos hordes de 5 de espesor: 

<TABLE BORDER="5" CELLSPACING="20"> 


Separacion entre el horde y cl contcnido dentro de las celdas 

Por defecto, la separacion entre el horde y el contenido dentro de las celdas es de un pixel. Se puede cambiar esto con el 
atributo CELLPADDING, que se pone dentro de la etiqueta TABLE. 

Por ejemplo, para obtener una separacion de 20 pixels entre el contenido y los hordes, dentro de cada celda: 

<TABLE BORDER CELLPADDING="20"> 

Se puede combinar este atributo con CELLSPACING (visto en el apartado anterior). 

Por ejemplo, una tabla con hordes de 5 de espesor, separacion entre celdas de 15 y separacion del contenido con respecto a 
los hordes de las celdas de 20, lo obtendn'amos con: 

<TABLE BORDER="5" CELLSPACING="15" CELLPADDING="20"> 
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9. FORMULARIOS 


La manera general para que los lectores de nuestra pagina se puedan comunicar con nosotros es por medio de un enlace a 
nuestra direccion de e-mail, con lo que recibirfamos un e-mail convencional. 

Pero puede ser que lo que necesitemos sea solamente una respuesta concreta a unas opciones que presentaremos nosotros 
mismos, o un comentario del usuario, para ello le suministraremos un espacio en donde introducirlo. 

Se puede, hacer todo esto, ademas de otras cosas, utilizando los formularios, con los que se puede confeccionar paginas que 
contengan los elementos necesarios para ello, tal como botones de radio, listas de seleccion, cajetines de introduccion de 
texto y de control, etc., como vamos a ver. 

Los formularios permiten que los demas nos envlen la informacion directamente a nosotros o bien a nuestro servidor, en 
donde hemos instalado un programa que procese esta informacion. Por ejemplo, vamos a suponer que queremos crear 
una lista de correo. Los usuarios pueden introducir sus nombres y direcciones de e-mail y pulsar un boton de envi'o. 

Esos datos los podemos recibir "en bruto" en nuestro correo, con los que confeccionarlamos manualmente dicha lista de 
correo, sin necesitar ningun programa para ello. Este proceso es el que vamos a comentar en este capltulo. 

La otra posibilidad, de la que unicamente se va a hacer esta mencion, es que hubieramos instalado en nuestro servidor un 
programa especial para procesar esos datos y anadirlos a la lista de correo, y que incluso pudiera devolver automaticamen- 
te al usuario algiin tipo de informacion. Para conseguir esto, los formularios necesitan ejecutar programas o scripts por 
medio del CGI (Common Gateway Interface). El CGI permite a los formularios ser procesados por programas escritos 
en cualquier lenguaje, aunque los mas usados en Internet son el Perl y el C. 

El tipo de formulario que se describe a continuacion no funcionara en todos los navegadores, por lo que es conveniente 
suministrar al final del formulario, como una alternativa, un enlace de e-mail ordinario (ver el Capltulo 4) 


La estructura general de un formulario es: 

1. Etiqueta de inicio: 

<FORM ACTION="ltiailto: email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 

2. Cuerpo del formulario 

(Elementos para introducir los datos). 

3. Botones de envlo y de borrado. 

4. Etiqueta de cierre </FORM> 


1. Etiqueta de inicio 

El atributo ACTION indica la accion que se debe efectuar y que es que los datos scan enviados por e-mail a la direccion 
indicada. (Si hicieramos uso del CGI, serla precisamente aqul donde indicarlamos su localizacion en el servidor, que ha- 
bitualmente es el directorio cgi-bin, para que procese los datos). 

El atributo METHOD="POST" indica que los datos sean inmediatamente enviados por correo a la direccion decorreo 
electronico, nada mas pulsar el usuario el boton de envlo. 

Con el atributo ENCTYPE="TEXT/PLAIN" se consigue que las respuestas las recibamos como un archivo de texto, 
perfectamente legible y sin codificar. 
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2. Cucrpo del Formulario (Elemcntos para introducir los datos) 

La introduccion de los datos se consigue por medio de la etiqueta: 

<INPUT TYPE="XXX" NAME="YYY" VALUE="ZZZ"> 

XXX Es la palabra que indica el tipo de datos a introduccir. 

YYY Es el nombre que le asignamos nosotros a la variable de introduccion del dato. 

Z Z Z Es la palabra asociada a un elemento. 

Los vamos a dividir en tres clases: 

a. Introduccion por medio de texto 

b. Introduccion por medio de menus 

c. Introduccion por medio de botones 


a. Introduccion por medio de texto 

Introduccion por medio de texto (una lineal 

En este caso es XXX=TEXT, es decir, INPUT TYPE="TEXT". El atributo VALUE no procede en este caso. 

Ejemplo. Vamos a poner un ejemplo solicitando el apellido del usuario: 

<FORM ACTION="inailto:e-mail" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 

Escribe tu apellido: 

<BR><INPUT TYPE="TEXT" NAME="Apellido"> 

</FORM> 

Si el usuario introduce su apellido, p. ej. Ruiz, y pulsa el boton de envfo (que veremos mas adelante), recibiremos, un e- 
mail suyo con el siguiente texto: 

Apellido=Ruiz 

La longitud de este formulario es por defecto de 20 caracteres. Se puede variar incluyendo en la etiqueta el atributo 
SIZE="numero". Por otra parte, sea cual sea la longitud del formulario, si no se indica nada, el usuario puede intro¬ 
ducir el mimero de caracteres que quiera. Se puede limitar, incluyendo el atributo MAXLENGTH= " numero ". 

En el caso que hemos visto, si hubieramos cambiado la etiqueta correspondiente por: 

<INPUT TYPE="text" NAME="Apellido" SIZE="10" MAXLENGTH="12"> 

(Se puede comprobar como no se pueden introducir mas de 12 caracteres). 

Tambien se puede hacer que el texto introducido no sea reconocible, es decir que todos los caracteres se representen por 
asteriscos. Basra con cambiar en la etiqueta INPUT TYPE="TEXT" por INPUT TYPE="password". En el ultimo 
ejemplo, podrfamos cambiar la etiqueta correspondiente por: 

<INPUT TYPE="password" NAME="Apellido" SIZE="10" MAXLENGTH="12"> 

(Se puede comprobar como los caracteres introducidos se representan por asteriscos) 


Introduccion por medio de texto (multiples Ifneas) 

Cuando el texto a introducir puede alcanzar una gran longitud, por ejemplo un comentario, es conveniente utilizar un 
formulario de texto de multiples Ifneas. 

Esto se consigue con la etiqueta de inicio: 

<TEXTAREA NAME="YYY" ROWS="numero" COLS="numero"> 

(No se utiliza INPUT TYPE y donde ROWS representa el numero de filas, y COLS el de columnas). 
</TEXTAREA> 

Ejemplo: un formulario solicitando los comentarios del usuario: 

<FORM ACTION="mailto:e-mail" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 

Introduce tus comentarios: 

<BR><TEXTAREA NAME="Comentarios" ROWS="6" COLS="40"> 

</TEXTAREA> 

</FORM> 

(El salto de Ifnea del texto introducido no se efectua automaticamente). 
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Una vez que el usuario haya escrito sus comentarios dentro del formulario, y haya pulsado el boton de envfo, recibiremos 
un e-mail suyo con el siguiente texto: 

Comentarios=mensaje escrito por el usuario 


b. Introduccion por medio de menus 

Si queremos que el usuario, en vez de introducir un texto, como hemos visto en los casos anteriores, escoja entre varias op- 
ciones que le presentamos nosotros, haremos uso de un formulario en forma de menu. 

Se consigue con la etiqueta de inicio <SELECT NAME= " YYY " > y la de cierre </SELECT>. 

Las distintas opciones a escoger se consiguen con la etiqueta <OPTION>. 


Ejemplo: Pedimos al usuario que elija su color preferido: 

<FORM ACTION="mailto:e-mail" METHOD= "POST" ENCTYPE="TEXT/PLAIN"> 

<BR>Cual es tu color preferido?<BR> 

<SELECT NAME="ColorPreferido"> 

<OPTION SELECTED> 

<OPTION>Rojo 

<OPTION>Verde 

<OPTION>Azul 

<OPTION>Amarillo 

</SELECT> 

</FORM> 

Si el usuario ha escogido, p. ej. Azul y ha pulsado el boton de envfo, recibiremos un e-mail suyo con el texto: 
ColorPreferido=Azul. 

En el ejemplo anterior, solo es visible en el formulario una opcion. Si queremos que sean visibles multiples opciones a la 
vez, anadimos en la etiqueta los atributos MULTIPLE SIZE="numero", donde especificamos el numero de opciones 
visibles. 

Si cambiamos en el ejemplo anterior la etiqueta correspondiente por: 

<SELECT NAME="ColorPreferido" MULTIPLE SIZE="2"> 


c. Introduccion por medio de botones 

Caja de confirmacion (checkbox) 

Si queremos que el usuario conflrme una opcion determinada, podemos hacer uso de un formulario de confirmacion, o 
checkbox, que se consigue con la etiqueta: 

<INPUT TYPE="CHECKBOX" NAME="YYY"> 

Ejemplo: Solicitamos al usuario que confirme su inclusion en una lista de correo: 

<FORM ACTION= "mailto:email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 

<INPUT TYPE="checkbox" NAME="Lista"> 

Sf, deseo ser incluido en la lista de correo. 

</FORM> 

Si el usuario marca este formulario y pulsa el boton de envfo, recibiremos un e-mail suyo con el texto: 

Lista=On 


Si queremos que el formulario aparezca inicialmente como marcado (el usuario no necesitara hacerlo), basta con anadir 
el atributo CHECKED dentro de la etiqueta. En el ejemplo anterior sustituimos la etiqueta equivalente por: 

<INPUT TYPE="CHECKBOX" NAME="Lista" CHECKED> 
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Botones de radio 


Cuando queremos que el usuario elija una linica opcion entre varias, podemos hace uso de los botones de radio, que se 
consiguen con la etiqueta: 

<INPUT TYPE="RADIO" NAME="YYY" VALUE="ZZZ"> 

Donde YYY es el nombre que le ponemos a la variable que se trata de elegir, y Z Z Z es el nombre de cada una de las opcio- 
nes en concreto. 


Ejemplo: solicitamos al usuario que defma cual es su sistema operativo preferido: 

<FORM ACTION="mailto:email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 

Cual es tu sistema operativo preferido?<BR> 

<INPUT TYPE="radio" NAME="Sistema" VALUE="Linux">Linux 
<INPUT TYPE="radio" NAME="Sistema" VALUE="MacOS" CHECKED>MacOS 
<INPUT TYPE="radio" NAME="Sistema" VALUE="0S/2">OS/2 
<INPUT TYPE="radio" NAME="Sistema" VALUE="Unix">Unix 
<INPUT TYPE="radio" NAME="Sistema" VALUE="Windows">Windows 
</FORM> 

Observese el atributo opcional CHECKED que se ha anadido en la segunda etiqueta. Esa sera la opcion que aparece marca- 
da pot defecto. 

Observese tambien que no es posible escoger mas de una opcion. 

Si el usuario ha escogido la opcion MacOS y pulsa el boton de envfo, recibiremos un e-mail suyo con el texto: 
Sistema=MacOS 


3.Botones de envio y de borrado 

Hasta ahora, en todos los ejemplos que hemos visto, faltaba un elemento esencial en cualquier formulario, y es el boton de 
envio de los datos, que se consigue con la etiqueta: 

<INPUT TYPE= "submit" VALUE= "ZZZ"> 

En donde Z Z Z es el texto que queremos que aparezca en el boton. 


Vamos a anadirlo al primer ejemplo, en el que se solicitaba el apellido del usuario: 

<FORM ACTION="mailto:email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 
Escribe tu apellido: 

<BR><INPUT TYPE="text" NAME="Apellido"> 

<P><INPUT TYPE="submit" VALUE="Enviar datos"> 

</FORM> 


Otro boton interesante es el de borrado de los datos introducidos, muy conveniente en un formulario con muchos ele- 
mentos. Es muy similar al de envio, pues se consigue con la etiqueta: 

<INPUT TYPE="RESET" VALUE="ZZZ"> 

En donde Z Z Z es el texto que queremos que aparezca en el boton. 

Podrlamos anadirlo al ejemplo anterior: 

<P><INPUT TYPE="reset" VALUE="Borrar datos"> 

Se puede comprobar su funcionamiento, escribiendo algo en el formulario y pulsando luego el boton de borrado. 
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Consideraciones finales 


Hasta ahora hemos visto uno a uno los diferentes elementos que se pueden utilizar. Pero no hay ningiin inconveniente en 
usar, dentro del mismo formulario, distintos tipos de introduccion de dates. A1 pulsar el usuario el boton de envlo recibi- 
namos en e-mail suyo con las distintas parejas NAME=VALUE de cada elemento, encadenadas con el slmbolo &. 


Ejemplo 

Haremos como ejemplo practice un libro de visitas a nuestra pagina. 

<HTML> 

<HEAD> 

<TITLE>Libro de Visitas</TITLE> 

</HEAD> 

<BODY> 

<H2>Libro de visitas</H2><P> 

<FORM ACTION="mailto:email" METHOD="POST" ENCTYPE="TEXT/PLAIN"> 
Tu nombre: 

<BR><INPUT TYPE="text" NAME="Nombre"> 

<P>Escribe tus comentarios:<BR> 

<TEXTAREA NAME="Comentarios" ROWS="6" COLS="40"> 
</TEXTAREA><P> 

<INPUT TYPE="submit" VALUE="Enviar dates"> 

<INPUT TYPE="reset" VALUE="Borrar dates"> 

</FORM> 

<P><HR> 

</BODY> 

</HTML> 
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10. MAPAS 


Hemos visto anteriormente dos maneras distintas de enlazar una pagina con otra: por medio de un enlace de texto o por 
medio de una imagen. Pero en este ultimo caso se hacia uso de una imagen para enlazar a una unica pagina. 

Se puede utilizar una unica imagen para enlazar con varias paginas, yendo a una u otra segun la zona en donde se pulse el 
raton. Este tipo de imagenes se llaman mapas. 

Veremos como se crea un mapa partiendo de una imagen, y como se implementa dicho mapa con el lenguaje HTML en 
nuestra pagina. 

Hay dos tipos de mapas: 

1. Mapas gestionados por el servidor 

En este tipo de mapas al desplazar el cursor sobre la imagen que forma el mapa se van obteniendo las distintas coordena- 
das. Cuando se pulsa el raton en un punto determinado, el navegador envia esas coordenadas al servidor, y este comprueba 
en un archivo MAP (situado en su directorio cgi-bin) cual es la pagina que se corresponde con estas coordenadas, envia es- 
ta informacion al navegador, y este solicita a su vez al servidor que le enlace con dicha pagina. 

Estos mapas, tienen la ventaja de poder ser utilizados por todos los navegadores, incluso las versiones mas antiguas. 

Pero tienen varios inconvenientes: No todos los servidores tienen implementado el programa CGI necesario para que 
pueda funcionar un mapa de este tipo. Ademas hay que conocer el tipo de servidor (NCSA, el mas comiin, o CERN), pues 
el codigo a aplicar es distinto en un caso u otro. Por otra parte, al requerir un trasiego de informacion entre el navegador 
y el servidor, el tiempo de respuesta es mayor que en el otro tipo, como veremos a continuacion. 

2. Mapas gestionados por el cliente 

Estos mapas son gestionados por el cliente (nuestro navegador) y no por el servidor, como en el caso anterior. 

En este tipo de mapas, al ir desplazando el cursor se observa que en ciertas zonas se convierte en el simbolo normal para 
enlazar con otras paginas (una mano, habitualmente). 

Si se pulsa en estas zonas activas (HOTSPOTS), el navegador consulta con el documento HTML que ha recibido, y deci¬ 
de a que pagina o direccion corresponde esa zona activa. 

Es decir, no necesita enviar la informacion al servidor y esperar la respuesta de este, con lo que el proceso es mas rapido 
que en el caso anterior, reduciendose ademas el trafico de datos y la sobrecarga al servidor. Otras ventajas son que al pasar 
por una zona activa se muestra la direccion a la que se corresponde (al contrario que en el caso anterior, en que solo se ven 
unas coordenadas). Ademas, estos mapas se pueden utilizar off-line, al contrario tambien que en el otro tipo, ya que no re- 
quieren la ayuda del servidor. 

Pero tiene el inconveniente de que estos mapas no son implementados por todos los navegadores, como en el caso ante¬ 
rior, aunque sf por la mayon'a de los utilizados actualmente, desde las versiones siguientes: Netscape 2.0, Microsoft 
Explorer 2.0, Mosaic 2.1, etc. Pero se puede obviar este inconveniente suministrando enlaces alternativos para los navega¬ 
dores que no implementen este tipo de mapas. 

En lo que sigue, vamos a ver exclusivamente como implementar este tipo de mapas, es decir, mapas gestionados por el 
cliente (client-side image maps). 

Confeccion de la imagen del mapa 

Antes que nada, es necesario confeccionar la imagen que va a servir como mapa. Se hara con un programa grafico, y pue¬ 
den utilizarse los formatos GIF o JPG. 

Para crear una mapa para utilizarlo en nuestra pagina HTML, antes se confecciona con un programa grafico la imagen 
que nos va a servir como mapa. 

Para definir un area activa rectangular, necesitamos conocer las coordenadas de su angulo superior izquierdo (XI, Y1) 
y las de su angulo inferior derecho (X2 , Y2 ). 

Estas coordenadas las obtenemos con el programa grafico con el que hemos confeccionado la imagen. Al obtener los datos 
necesarios (las coordenadas) podemos escribir el codigo HTML que convierta esta imagen en un mapa. 
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Codigo HTML para definir un mapa gestionado por el cliente 
En este caso, el codigo que debemos escribir es el siguiente: 

<MAP NAME="noinbre"> 

<AREA SHAPE="RECT" C00RDS="X1,Y1,X2,Y2" HREF="paginaXX.html"> 

<AREA SHAPE="RECT" C00RDS="W1,W1,Z2,Z2" HREF="paginaYY.html"> 

<AREA SHAPE="DEFAULT" NOHREF> 

</MAP> 

<IMG SRC="imagen.gif" USEMAP="inombre"> 

<MAP NAME="nombre"> 

• Esta es la eriqueta de apertura del mapa, y en donde se define su nombre. 

<AREA SHAPE="RECT" C00RDS="X1,Y1,X2,Y2" HREF="paginaXX.html"> 

• Esta etiqueta define la primera zona activa. Se indica que su forma (SHAPE, en ingles) es rectangular, y que las coorde- 
nadas de su angulo superior izquierdo son (XI, Y1), y que las del angulo inferior derecho son (X2 , Y2 ). A continua- 
cion se indica cual es el enlace que se desea obtener. 

<AREA SHAPE="DEFAULT" NOHREF> 

• Con esta etiqueta se define el area completa del mapa, indicando que su forma es la que tiene por defecto (default), o sea 
rectangular. Si se quisiera que el mapa no abarcara la totalidad de la imagen, o incluso que tuviera una forma distinta, ha- 
bn'a que indicarlo aqui, en lugar de la instruccion DEFAULT, haciendo uso del mismo tipo de instrucciones que las de las 
zonas activas. 

</MAP> 

• Etiqueta de cierre del mapa. 

<IMG SRC="imagen.gif" USEMAP="inombre"> 

• Con esta etiqueta se pide al servidor que envfe una imagen llamada imagen.gif. Con USEMAP=" inombre" se indica 
que esta imagen es el mapa definido anteriormente con ese nombre, y que debe actuar en consecuencia a las pulsaciones 
del raton, solicitando un enlace determinado en las zonas activas, o no haciendo nada en el resto. 

Con el atributo NOHREF, se define que el area completa de la imagen es una zona no activa, excepto en las areas defmidas 
anteriormente como activas. 

Enlaces alternativos de texto 

Como se ha dicho anteriormente, no todos los navegadores implementan este tipo de mapas gestionados por el cliente. 
Por ello, es necesario suministrar unos enlaces alternativos convencionales de texto. 

Por ejemplo, a continuacion del mapa, se pueden poner enlaces de texto, correspondientes a las dos zonas activas (redu- 
ciendo la fuente, para hacerlo mas estetico): 

<FONT SIZE=-1> 

<A HREF= " paginaXX. html" >Mi pagina XX</A> 

<A HREF="paginaYY.html">Mi pagina YY</A> 

</FONT> 

Zonas activas en forma de circulos o poligonos 

Hasta ahora hemos definido las zonas activas en forma de rectangulos. Pero tambien se puede definir estas zonas activas 
como circulos o como poligonos. 

Para definir una zona activa circular es necesario conocer las coordenadas de su centro (X, Y) y la longitud de su radio 
(R). Una vez sabidos estos datos, la etiqueta es como sigue: 

<AREA SHAPE="CIRCLE" COORDS="X,Y,R" HREF="direcci6n_de_la_pagina"> 

Para definir una zona activa poligonal hay que conocer las coordenadas de los distintos puntos (XI,Yl), (X2,Y2), 
(X3 , Y3 ), etc. Con estos datos, la etiqueta se escribe como sigue: 

<AREA SHAPE="POLYGON" C00RDS="X1,Yl,X2,Y2,X3,Y3,..." HREF="enlace"> 
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11. FRAMES 


Frames (en ingles, marcos o cuadros) es un procedimiento del lenguaje HTML para dividir la pan talk en diferentes zo- 
nas, o ventanas, que pueden actuar independientemente unas de otras, como si se tratara de paginas diferentes, pues incluso 
cada una de elks puede tenet sus propias barras deslizadoras. Los navegadores que lo implementan son el Netscape 2.0, y 
el Explorer 2.0 en adeknte. 

Una de sus caracterfsticas mas importantes es que pulsando un enlace situado en un frame, se puede cargar en otro frame 
una pagina determinada. Esto se utiliza frecuentemente para tenet un frame estrecho en la parte lateral (o superior) con 
un Indice del contenido en forma de diferentes enlaces, que, al ser pulsados cargan en la ventana principal las distintas pa¬ 
ginas. De esta manera se facilita la navegacion entre las paginas, pues aunque se vaya pasando de unas a otras, siempre estara 
a la vista el Indice del conjunto. 

Para comprender los distintos conceptos vamos a desarrolkr un ejemplo, creando una pagina con dos Frames. El de la iz- 
quierda va a servir de fndice de lo que veamos en el de la derecha, y en &te veremos inicialmente una pagina de presenta- 


Documento de definicion de los frames 


Lo primero que tenemos que hacer es crear un documento HTML en el que definiremos cuantas zonas va a haber, que 
distribucion y tamano van a tenet, y cual va ser el contenido de cada una de ellas. 

En el ejemplo que vamos a desarrolkr, la pagina va a tenet dos frames distribuidos en columnas (es decir, uno al kdo del 
otro, en vez de uno encima del otro, lo que serk una distribucion en fiks). 

Con respecto al tamano, haremos que el primero (el del izquierda) ocupe el 20% del ancho de la pantalk, y el otro, el 
80% restante. 

Y con respecto al contenido, el frame de la izquierda va a contener un documento HTML que va a servir de Indice de lo 
que veamos en el otro (y que vamos a llamar mi_indice. html), y el de la derecha otro documento HTML que va a 
servir de pagina de presentacion (al que Ikmaremos mi_presentacion. html). 

Todo lo anterior se refleja en el siguiente documento HTML: 

<HTML> 

<HEAD> 

<TITLE>Mi primera pagina con frames</TITLE> 

</HEAD> 

<FRAMESET COLS="20%,80%"> 

<FRAME SRC="mi_indice.html"> 

<FRAME SRC="mi_presentacion.html" NAME="principal"> 
</FRAMESET> 

</HTML> 


Observese lo siguiente: 

Es un documento parecido a los que conodamos hasta abora. La diferencia esta en que en vez de utilizar la etiqueta BODY, 
que sirve normalmente para delimitar lo que se va a ver en la pantalk, se hace uso de la etiqueta FRAMESET (defmir los 
frames). 

En este caso, con la etiqueta <FRAMESET COLS= " 2 0% , 8 0 % " > se define que va a haber dos frames y que van a ir en 
columnas. Si hubieramos querido que fueran en fiks, habrkmos puesto ROWS (fiks, en ingles). Tambien se define el es- 
pacio en anchura que va a ocupar cada uno de ellos en la pantalk. Se ha puesto como porcentajes del total, pero se podn'a 
tambien haber puesto una cifra absoluta, que representark el numero de pixels a ocupar. 


Ya se ha definido el numero de frames, su distribucion y su tamano, pero falta por defmir el contenido de cada frame. Esto 
se hace con las etiquetas: 

<FRAME SRC="mi_indice.html"> 

<FRAME SRC="mi_presentacion.html" NAME="principal"> 

Con esto se define que el contenido del primer frame (izquierda) sea el documento HTML que hemos Ikmado 
mi_indice. html y el del segundo (derecha) sea el documento HTML mipresentacion. html. 
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Observese que en la etiqueta del segundo se ha incluido el atributo NAME="principal", pero no as! en el primero. El 
motive es que se necesita dar un nombre al segundo frame, pues, como veremos a continuacion, en el documento del pri¬ 
mer frame va a haber unos enlaces que van a ir dirigidos hacia el. En este case solo tenemos dos frames, pero podrfa haber 
mas, y es necesario distinguirlos unos de otros. Y el primero no necesita nombre, pues no va a haber enlaces en el segundo 
dirigidos hacia el. 

A este documento le vamos a llamar itii_pagina. htitil, pero todavi'a no lo vamos a guardar, pues falta por anadir algo 
que veremos mas adelante. 

Documentos HTML de cada frame 

Necesitamos ahora confeccionar el documento HTML de cada uno de los frames. Recuerdese que son como paginas in- 
dependientes, que pueden tenet cada una su propio fondo, etc., y todo lo que queramos anadir en ellos. 


Documento del frame de la izquierda 

Va a tenet un fondo amarillo, y va a contener dos enlaces dirigidos al frame de la derecha. 

<HTML> 

<HEAD> 

<TITLE> Indice </TITLE> 

</HEAD> 

<BODY BGCOLOR="#FFBBOO"> 

<P><A HREF= "itii_presentacion.html" TARGET="principal">Presentaci6n</A> 
<P><A HREF="otra_pagina.htitil" TARGET="principal">Esta es otra pagina</A> 
<P><IMG SRC="iitiagen.gif"> 

</BODY> 

</HTML> 

Dentro de las etiquetas de los enlaces podemos observar algo nuevo, y es el atributo TARGET (en ingles: objetivo, bianco), 
que sirve para hacer que al ser activado el enlace no se cargue en el propio frame, sino en otro, precisamente en el que ha- 
yamos llamado con ese nombre en el documento de defmicion de los frames. 

En nuestro caso, le hemos dado el nombre de "principal" al frame de la derecha, y es por tanto ahi donde se van a car- 
gar los documentos HTML. 

Guardamos este documento con el nombre de mi_indice . html 


Documento del frame de la derecha 

Va a tenet un fondo negro, y va a contener solamente un texto. 

<HTML> 

<HEAD> 

<TITLE> Presentacion </TITLE> 

</HEAD> 

<BODY BGCOLOR="#000000" TEXT="#0000FF"> 
<CENTER><FONT SIZE=-(-3><STR0NG> 

<P>Esta es la version 

<BR><FONT COLOR= " # FF 0 0 0 0 " >con frames< /FONT> 
<BR>de mi pagina 

< / STRONGX / FONTX / CENTER> 

</BODY> 

</HTML> 

Guardamos este documento con el nombre de ini_presentacion. html 
Gon lo visto anteriormente, ya tenemos las tres piezas que necesitamos: 

Documento de defmicion de los frames 
Documento del contenido del primer frame 
Documento del contenido del segundo frame 
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Alternativa para los navegadores que no soportan frames 


Hay que prever el caso en que los navegadores no soportan o desconocen las etiquetas FRAMESET y FRAME. 

Para estos casos esta prevista la etiqueta <NOFRAMES> y </NOFRAMES>. Se anaden al final del documento de defini- 
cion de los frames, y se pone entre ambas lo que veran los que acceden con un navegador que no soporta frames. Puede in- 
cluso ser el codigo HTML de una pagina completa. 

En nuestro caso, pudieramos poner un mensaje advirtiendo de esta circunstancia, y dirigiendo al usuario, con un enlace 
normal, hacia una pagina que hayamos definido como principal o de presentacion para estos casos. (Tambien podrfamos 
no decir nada sobre frames, y colocar aqul el codigo de la pagina de presentacion) 

<HTML> 

<HEAD> 

<TITLE>Mi pagina con frames</TITLE> 

</HEAD> 

<FRAMESET COLS="20%,80%"> 

<FRAME SRC="itii_indice.htitil"> 

<FRAME SRC="itii_presentacion.htitil" NAME="principal"> 
</FRAMESET> 

<NOFRAMES> 

Estas utilizando un navegador que no soporta frames. 

<P>Pulsa para visitar mi <A HREF= "presentacion. html"> pagina</A>. 
</NOFRAMES> 

</HTML> 

Ahora sf podemos guardar este documento con el nombre de mi_pagina. htitil. 

Atributos de la etiqueta <FRAMESET> 

La etiqueta FRAMESET, como hemos visto en el ejemplo, es la que define la distribucion, el mimero y tamano de los fra¬ 
mes. Tiene dos atributos: COLS (columnas) y ROWS (filas): 

<FRAMESET COLS="XX,YY,ZZ,..."> 

<FRAMESET ROWS="XX,YY,ZZ,..."> 

Define la distribucion de los frames en columnas o en filas, segun se use uno u otro atributo. Por ejemplo: 

<FRAMESET COLS= "XX, YY"> (habra dos frames en columnas) 

<FRAMESET COLS= "XX, YY, ZZ "> (habra tres frames en columnas) 

Define el tamano de los frames, segun el valor que demos a XX, YY, ZZ.... Este valor se puede expresar en un porcentaje 
del ancho del pantalla (para las columnas), o del alto de la pantalla (para las filas). Asi, por ejemplo: 

<FRAMESET COLS="%20,%80"> 

(la columna de la izquierda ocupara el 20% del ancho de la pantalla, y la de la derecha el 80% restante) 
<FRAMESET ROWS="% 10,%70,%20"> 

(la fila superior ocupara el 10% del alto de la pantalla, la del medio el 70%, y la inferior el 20%) 

Un mimero absoluto que representa el mimero de pixels que ocupara cada frame a lo ancho o a lo alto (segun sean filas o 
columnas). Asl, por ejemplo: 

<FRAMESET COLS="40,600"> 

(la columna de la izquierda tendra 40 pixels de ancho y la de la derecha 600). 

Pero es peligroso utilizar solo valores absolutos, pues el tamano de la pantalla varfa de un usuario a otro. Si se va a usar al- 
giin valor absoluto para un frame, es mejor mezclarlo con alguno relativo, como los que vamos a ver acontinuacion, para 
que se ajuste el total a la pantalla del usuario 

Si se pone un valor relativo poniendo un asterisco (*), en vez de un mimero, se interpreta como que ese frame debe tener 
el espacio restante. Por ejemplo: 

<FRAMESET ROWS="100,*,100"> 

(Habra tres filas, la superior y la inferior de una altura de 100 pixels, y la del medio el espacio restante). 

Si hay mas de un frame con *, ese espacio restante se dividira por igual entre ellos. Si hay un mimero antes del *, ese frame 
obtiene esa cantidad mas de espacio relativo. Asf "2 * , *" darla 2/3 para el primer frame y 1/3 para el otro. 
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Frames sin hordes 


Si se desea que no haya un horde de separacion entre los frames, se deben incluir el atributo FRAMEBORDER= " 0 " den- 
tro de la etiqueta FRAMESET. No todas las versiones de los navegadores lo implementan. 

Para que tambien desaparezcan los huecos de separacion entre frames hay que anadir otros dos atributos (el primero es 
para el Explorer y el segundo para el Netscape): FRAMESPACING= " 0 " y BORDER= " 0 ", con lo que la etiqueta com- 
pleta quedan'a: 

<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" BORDER="0" COLS="xx,yy"> 

Atributos de la etiqueta <FRAME> 

Esta etiqueta define las cararacterfsticas de un frame concreto, no del conjunto de los frames, como era el caso con la eti¬ 
queta <FRAMESET>. Puede tenet los siguientes posibles atributos, que van dentro de la etiqueta <FRAME>: 

SRC="direccion" 

• Esta direccion puede ser la de un documento HTML (tal como hemos utilizado en el ejemplo), o cualquier otro recur- 
so Web (o URL). Con este atributo se indica lo que se cargara inicialmente en el frame. Si no se le pone este atributo a la 
etiqueta <FRAME>, entonces dicho frame aparecera inicialmente vacio, aunque tendra las dimensiones asignadas. 

NAME="nombre_de_la_ventana" 

• Este atributo se usa para asignar un nombre a un frame. De esta manera se podra "dar en el bianco" (en ingl&, target) en 
esta pagina, desde un enlace situado en otra pagina. Es decir, que pulsando en otra pagina un enlace, se cargara precisa- 
mente en esta, tal como hemos visto en el ejemplo. El atributo NAME es opcional. Por defecto, todas las ventanas carecen 
de nombre. Los nombres que se escojan deben comenzar por un caracter alfanumerico. 

MARGINWIDTH="numero" 

• Se utiliza este atributo cuando se quiere controlar el ancho de los margenes dentro de un frame. El numero que se pon- 
ga representa los pixels de los margenes. Este atributo es opcional. 

MARGINHEIGHT="numero" 

• Igual que el anterior, pero referido a los margenes en altura. 

SCROLLING="yes|no|auto" 

• Este atributo se utiliza para decidir si el frame tendra o no una barra deslizadora. Si se escoje "yes" tendra siempre una 
barra deslizadora. Si se escoje "no" no la tendra nunca, y si se escoje "auto", sera el navegador quien decida si la tendra o 
no. Este atributo es opcional. Su valor por defecto es "auto". 

NORESIZE 

• A este atributo no se le asigna un valor numerico, como a los demas. Es un indicador para que la ventana no se pueda re- 
dimensionar (en ingles, resize) por parte del usuario. Es un atributo opcional. Por defecto, todos los frames son redimen- 
sionables. 

FRAMEBORDER="no" 

• Este atributo elimina el horde en un frame, pero si se quiere que se elimine completamente, tambien hay que ponerselo 
al frame contiguo. Si se quiere eliminar los hordes de todos los frames, se debe colocar en la etiqueta FRAMESET, como 
hemos visto anteriormente. 

El atributo TARGET 


En el ejemplo hemos visto que, como quen'amos que los enlaces situados en el frame de la izquierda surtieran efecto no en 
el mismo, sino en otro frame (el situado a la derecha), tem'amos que poner dentro de cada enlace el siguiente atributo 
TARGET="principal", siendo "principal" el nombre que habiamos dado al segundo frame, en el documento de 
definicion de frames. Es decir, hemos utilizado el atributo de esta manera: 

TARGET="nombre_dado_a_otro_frame" 

Estos nombres, que los escogemos nosotros, pueden ser cualquiera, pero con la condicion que el primer caracter sea alfa¬ 
numerico (letra o numero). 
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Pero hay unos nombres reservados (es decir, que no se pueden usar para denominar a un frame), que hacen que este atribu- 
to efectue unas funciones especiales. Para que cumplan su cometido, es imprescindible escribir estas palabras reservadas 
(blank, self y top) en minusculas. 

TARGET="_blank". Hace que se abra una nueva copia del navegador, y el enlace activado se carga en ella, a pantalla 
completa. Es decir, tendrlamos dos copias funcionando a la vez. 

TARGET= "_self ". Hace que el enlace se cargue en el propio frame. 

TARGET="_top". Hace que el enlace se cargue a pantalla completa, suprimiendo todos los frames, pero sin que se car¬ 
gue una nueva copia del navegador. Un error comun es olvidar poner este atributo en los enlaces que estan en un frame, 
con lo que al ser activados, la pagina llamada se carga en el propio frame, lo cual es muy molesto si esa pagina pertenece a 
otro sitio web. Esto se evita poniendo este atributo en las etiquetas de los enlaces. 

Frames anidados dentro dc otros frames 


Hasta ahora hemos contemplado solo la posibilidad de tenet una distribucion de los frames en bias o en columnas, (de- 
pendiendo que se utilice el atributo ROWS o COLS en la etiqueta FRAMESET), pero no ambos a la vez. Se puede obtener 
distribuciones complejas anidando filas en una columna, o a la inversa, columnas dentro de una fila. 

Supongamos que queremos la siguiente distribucion: 

Un frame estrecho en horizontal en la parte superior, de lado a lado de la pantalla (altura, el 15%) 

Otro frame estrecho en vertical en la parte izquierda, debajo del anterior (anchura, el 20%) 

Un tercero ocupando el resto de la pantalla. 

Vemos que, en realidad, esto equivale a la siguiente distribucion: 

Dos filas. La superior ocupa el 15% y la inferior el resto. 

La fila inferior dividida en dos columnas. La primera (la de la izquierda) ocupa el 20% y la otra, el resto. 

El documento de defmicion de las dos filas (olvidemonos de momento que la de abajo esta subdividida), serfa: 

<HTML> 

<HEAD> 

<TITLE>Pagina con dos filas</TITLE> 

</HEAD> 

<FRAMESET ROWS="15%,*"> 

<FRAME SRC="documento_fila_superior"> 

<FRAME SRC="documento_fila_inferior"> 

</FRAMESET> 

</HTML> 

Como la fila inferior, en realidad, son dos columnas (con una distribucion del 20% y resto), sustituimos (anidando) la 
etiqueta <FRAME SRC="docuitiento_f ila_inferior"> por: 

<FRAMESET COLS="20%,*"> 

<FRAME SRC="documento_columna_izqda"> 

<FRAME SRC=" docuitiento_coluitina_dcha" > 

</FRAMESET> 


Con lo que queda el documento definitivo asi: 

<HTML> 

<HEAD> 

<TITLE>Pagina con fila superior y dos columnas inferiores</TITLE> 
</HEAD> 

<FRAMESET ROWS="15%,*"> 

<FRAME SRC="documento_fila_superior"> 

<FRAMESET COLS="20%,*"> 

<FRAME SRC="documento_columna_izqda"> 
<FRAME SRC="documento_columna_dcha"> 
</FRAMESET> 

</FRAMESET> 

</HTML> 
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12. SONIDOS 


Una pagina Web puede tener sonidos incorporados, bien sea como un fondo sonoro que se ejecuta automaticamente al 
cargar la pagina, o como una opcion para que la active el propio usuario. 

Capacidades sonoras de los navcgadores 

Para poder escuchar los sonidos es necesario disponer, como es logico, de una tarjeta de sonido con sus correspondientes 
altavoces. Pero esto no es suficiente, pues no todos los programas navegadores funcionan igual. 

Explorer de Microsoft 

A pardr de la version 2.0 es capaz de reproducir fondos sonoros sin necesidad de anadir nada. Ademas, a partir de la ver¬ 
sion 3.0 del Explorer, es incluso compatible con los plug-ins del Netscape. 

Netscape 

Las versiones anteriores a la 2.0 requieren que se activen programas auxiliares. La version 2.0 si es capaz de reproducir un 
fondo sonoro, pero es necesario que tenga instalado un plug-in llamado Crescendo. La version 3.0 lleva el plug-in Live 
Audio (solo la version completa, no la reducida). que le hace capaz de reproducir un fondo sonoro. 


Pero a todas estas complicaciones de las distintas versiones de los navegadores, hay otra mas y es que el servidor donde este 
alojada la pagina Web debe tener configurados como MIME los formatos, . MID y . WAV. Si esto no es asl, aunque depo- 
sitemos en el servidor nuestro documento HTLM acompanado por el archivo de sonido, este no se ejecutara. 

Este problema no existe, sin embargo para el Explorer, con el que no nos tenemos que preocupar por este tema. 


Fondo sonoro para Microsoft Internet Explorer 

Para las versiones 2.0 en adelante, se utiliza la etiqueta: 

<BGSOUND SRC="archivo_de_sonido" LOOP="n"> 

El archivo de sonido puede estar en formato .MID o .WAV 

El atributo LOOP (en ingles, lazo) sirve para especificar el numero (n) de veces que se debe ejecutar el archivo de sonido. 
Si se escoge el numero n= " -1" o se pone LOOP= " infinite ", el sonido se ejecutara indefmidamente. Se puede omi- 
tir este atributo, y entonces el archivo se ejecutara una sola vez. 

La etiqueta para que se ejecute el archivo sonido.mid dos veces en el Explorer es: 

<BGSOUND SRC="sonido.mid" LOOP="2"> 

Fondo sonoro para Netscape 

La etiqueta basica para Netscape es: 

<EMBED SRC="archivo_de_sonido" WIDTH=XXX HEIGHT=YY> 

donde WIDTH es la anchura y HEIGHT la altura de una consola que aparece, y que tiene diferentes teclas (Play, Stop, Pau- 
sa, etc.). Respecto a las dimensiones XXX e YY estas dependeran del plug-ins que existe para Netscape. 

El archivo de sonido puede estar en formato, .MID o .WAV, pero recuerdese la advertencia hecha anteriormente, de que 
estos formatos deben estar configurados como MIME por el servidor donde este alojada la pagina. 

Dentro de la etiqueta podemos anadir los siguientes atributos opcionales: 

AUTOSTART= " true " Arranca automaticamente. 

LOOP= " true " Se ejecuta ininterrumpidamente 

Para conseguir que la consola sea invisible hay que anadirle el atributo HIDDEN= " true ". 

<EMBED SRC="sonido.mid" HIDDEN="TRUE"> 
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Fondo sonoro combinado para el Explorer y el Netscap< 


Se puede combinar los dos tipos disrintos de edquetas para conseguir que un fondo sonoro sea escuchado por usuarios que 
utilicen tanto el Explorer como el Netscape (siempre que este ultimo este preparado para ello). En este caso, el Explorer 
ignorara la etiqueta del Netscape, y viceversa. 

Las dos etiquetas necesarias para que se reproduzca un archivo de sonido ya sea en formato, .WAV o .MID, como sonido 
de fondo, tanto por el Explorer como por el Netscape (lo hara una sola vez): 

<BGSOUND SRC="sonido.mid"> Para el Explorer. 

<EMBED SRC="sonido.mid" HIDDEN="true"> Para el Netscape. 

Como vimos anteriormente para que un archivo de sonido, .MID o .WAV se ejecute como sonido de fondo, tanto por el 
Explorer como por el Netscape y que se ejecute indeflnidamente, a la etiqueta del Explorer basta con anadirle el atributo 
LOOP= " infinite ", como se ha visto anteriormente. Y con respecto a la etiqueta del Netscape, teoricamente deberfa 
tambien bastar anadirle el atributo LOOP= " true ", pero curiosamente esto no es asl, porque hay que poner las dimen- 
siones de la consola (que no se va a ver). 

Las dos etiquetas quedarian de esta manera: 

<BGSOUND SRC="sonido.mid" LOOP="infinite"> 

<EMBED SRC="sonido.mid" WIDTH="200" HEIGHT="55" AUTOSTART="true" 
LOOP="true" HIDDEN="true"> 

Activacion del sonido por el propio usuario 

Hemos visto como poner un sonido de fondo en una pagina. Hay otra opcion, mucho mas sencilla, y es la de poner un en¬ 
lace a un archivo de sonido, de tal manera, que al pulsarlo se ejecute el archivo. (Ver la Capltulo 4, en el que se explica 
como crear enlaces). 

Por ejemplo, poner un enlace a un archivo sonido.mid: 

Escucha esta <A HREF="sonido.mid"> musica</A> 

Al pulsar el enlace se activa, en una ventana aparte, el programa que ejecuta el sonido. Esto es valido para todos los navega- 
dores, incluso las versiones mas antiguas, con la linica condicion de que se haya configurado un programa auxiliar capaz 
de ejecutar archivos .MIDo .WAV 


Se puede hacer el enlace con un icono (Ver el Capltulo 5). Por ejemplo al hacer un enlace con un icono que se llamara 
snd .gif al archivo de sonido sonido. wav el enlace quedaria asl: 

<A HREF="sonido.wav"> <IMG SRC="snd.gif"> </A> 

En el capltulo anterior creamos una version con frames, en la que aparece inicialmente en el frame de la derecha una pa¬ 
gina de presentacion. 

Se puede colocar a esta pagina una musica de fondo, para que sea ejecutada por el Explorer y el Netscape. Para ello debe- 
mos hacer lo siguiente: 

En el documento de la derecha que llamamos presentacion. html dehemos anadir entre las etiquetas situadas al fi¬ 
nal </STRONG> y </FONT> lo siguiente: 

<BR><FONT COLOR="#FFOOOO"> jEscucha la musica de fondo! </FONT> 

<BGSOUND SRC="sonido.mid"> 

<EMBED SRC="sonido.mid" WIDTH="2" HEIGHT="0" AUTOSTART="true"> 
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